<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="fontface/iconfont.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/video-js.min.css">
    <link rel="stylesheet" href="css/index.css" />
    <!-- <link rel="stylesheet" href="css/share.css"> -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/ly.css">

    <script src="js/jquery-1.11.0.js"></script>
    <script src="js/share.js"></script>
    <script src="js/swiper.js"></script>
    <script src="js/video.min.js"></script>
    <script src="js/echarts.js"></script>

    <title>新增班级</title>
</head>

<body>
<div class="flex">
    <!--菜单-->
    <div class="cp-menu">
        <div class="cp-menu-icon flex flex-pac cff">
            教师端
        </div>
        <ul class="nav">
            <li class="nav-item">
                <div class="flex flex-ac plr20">
                    <img class="mr10"
                         src=""
                         alt="">
                    <span class="flex-f1">任务管理</span> <i class="lxjiconfont xiangyou1"></i>
                </div>
                <ul class="sub active">
                    <li><a href="查看专题.html" class="sub-item active">查看专题</a></li>
                    <li><a href="查看任务.html" class="sub-item">查看任务</a></li>
                </ul>
            </li>
            <li class="nav-item">
                <div class="flex flex-ac plr20">
                    <img class="mr10"
                         src=""
                         alt="">

                    <span class="flex-f1">班级管理</span> <i class="lxjiconfont xiangyou1"></i>
                </div>
                <ul class="sub">
                    <li><a href="查看班级.html" class="sub-item active">查看班级</a></li>
                    <li><a href="绑定学生.html" class="sub-item">绑定学生和专题</a></li>
                </ul>
            </li>
            <li class="nav-item">
                <div class="flex flex-ac plr20">
                    <img class="mr10"
                         src=""
                         alt="">

                    <span class="flex-f1">学生管理</span> <i class="lxjiconfont xiangyou1"></i>
                </div>
                <ul class="sub">
                    <li><a href="" class="sub-item active">学生管理</a></li>
                </ul>
            </li>
            <li class="nav-item">
                <div class="flex flex-ac plr20">
                    <img class="mr10"
                         src=""
                         alt="">

                    <span class="flex-f1">设备管理</span> <i class="lxjiconfont xiangyou1"></i>
                </div>
                <ul class="sub">
                    <li><a href="设备管理.html?nav=3&sub=0" class="sub-item active">设备管理</a></li>
                </ul>
            </li>
            <li class="nav-item">
                <div class="flex flex-ac plr20">
                    <img class="mr10"
                         src=""
                         alt="">

                    <span class="flex-f1">数据统计</span> <i class="lxjiconfont xiangyou1"></i>
                </div>
                <ul class="sub">
                    <li><a href="统计页面.html?nav=4&sub=0" class="sub-item active">数据统计</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <!--内容-->
    <div class="cp-container">
        <!--头部-->
        <header class="cp-header flex flex-ac">
            <div class="cp-header-content flex-f1">
                数据统计
            </div>
            <img class="cp-header-img" src="./images/banner.png" alt="">
            <p class="cp-header-name mr10">liyang</p>
            <input type="submit" class="login-out flex flex-pac" value="退出">
        </header>
        <!--面包屑-->
        <div class="el-breadcrumb flex flex-ac">
            数据统计
        </div>
        <!--新增专题-->
        <div class="bi-info">
            <div class="flex bg-ECF2F9 mb30">
                <div class="flex-f1 flex flex-ac plr20 ptb20 list-item-container">
                    <div class="setting-img"><img src="" alt=""></div>
                    <div class="">
                        <p class="fz14 c66">班级数</p>
                        <div class="fz14 c66"><span class="c33 fw-b fz24">1</span>个</div>
                    </div>
                </div>
                <div class="flex-f1 flex flex-ac plr20 ptb20 list-item-container">
                    <div class="setting-img"><img src="" alt=""></div>
                    <div class="">
                        <p class="fz14 c66">学生人数</p>
                        <div class="fz14 c66"><span class="c33 fw-b fz24">50</span>个</div>
                    </div>
                </div>
                <div class="flex-f1 flex flex-ac plr20 ptb20">
                    <div class="setting-img"><img src="" alt=""></div>
                    <div class="">
                        <p class="fz14 c66">任务数</p>
                        <div class="fz14 c66"><span class="c33 fw-b fz24">100</span>个</div>
                    </div>
                </div>
            </div>
            <div class="line-chart">
                <div class="border-container containertop">
                    <!-- <h5 class="name-title tile-size-color">
                        设备通断状态
                    </h5> -->
                    <div id="radar">
                        <div class="radarkong">
                            <!-- <p class="tile-size-color">设备总数 :<span class="Totalequipment"> 5个</span>统计时间
                                :<span>
                                    2020.01.05 15:28</span></p> -->
                        </div>
                        <div class="pie-chart" id="pie-chart"></div>
                        <ul class="SiteStatusList">
                            <li><i class="Statusnormal Statussame"></i>完成：<span>50</span></li>
                            <li><i class="Statusemergency Statussame"></i>进行中：<span>40</span></li>
                            <li><i class="StatusOffline Statussame"></i>未开始：<span>10</span></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="tx-c mt10 flex flex-pac">任务完成情况
                <!-- <div class="see-temperature-btn ml20">查看数据</div> -->
            </div>
        </div>
    </div>
</div>

</body>

</html>
<script>
    $(function () {
        //从url里边拿数据
        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        var navIndex = 0, subItemIndex = 0;
        navIndex = GetQueryString("nav");
        subItemIndex = GetQueryString("sub");
        console.log($('.nav .nav-item').eq(navIndex).addClass("active").find('.sub-item').eq(subItemIndex).addClass("active"))
        $('.nav .nav-item').click(function () {
            $(this).children().slideDown(1000)
            $(this).siblings().children(".sub").slideUp(1000)
        })
    })
    $(function () {
        pieChar()
    });
    window.onresize = function () {
        pieChar.resize();
    }
     //饼状图
     var pieChart = "";
    function pieChar() {
        pieChart = echarts.init(document.getElementById("pie-chart"));
        option = {
            color: ["#4f8bf9", "#fea31e", "#959595"],
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: [0, '60%'],
                    center: ["50%", "42%"],
                    label: {
                        normal: {
                            position: 'outside',
                            formatter: "{b}:{d}%"
                        }
                    },
                    data: [
                        { value: 50, name: '完成' },
                        { value: 40, name: '进行中', selected: true },
                        { value: 10, name: '未开始' }
                    ]
                }
            ]
        };
        pieChart.setOption(option);
    }
   
</script>
